<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02.使用react中的render的几点注意事项</title>
    <!--1、引入react核心文件-->
    <script src="./js/react.development.js"></script>
    <!--2、引入reactDOM核心文件-->
    <script src="./js/react-dom.development.js"></script>
</head>

<body>
    <!--3、创建容器元素-->
    <div id="root"></div>
    <div class="box" id="app"></div>
    <script>
        //4、创建容器元素对象
        // const root = ReactDOM.createRoot(document.querySelector('#root'));
        // console.log(root);

        //注意事项：
        //1) root.render可以使用多次，但最后一次render会将之前的覆盖掉。
        // root.render('尚硅谷');
        // root.render('京东');
        // root.render('淘宝');

        //2) 不要同时挂载相同的容器
        //通过class和id分别创建容器对象
        /* let box = ReactDOM.createRoot(document.querySelector('.box'));
        let app = ReactDOM.createRoot(document.querySelector('#app'));
        box.render('尚硅谷');
        app.render('京东'); */

        //3) 在一个页面中，可以挂载多个不同的容器
        /* let root = ReactDOM.createRoot(document.querySelector('#root'));
        root.render('尚硅谷');
        let app = ReactDOM.createRoot(document.querySelector('#app'));
        app.render('京东'); */

        //4) render中`可以渲染`的内容类型
        // let root = ReactDOM.createRoot(document.querySelector('#root'));
        //字符串
        // root.render('尚硅谷1');
        // root.render("尚硅谷2");
        // root.render(`尚硅谷3`);
        // root.render('<b>尚硅谷</b>'); //类似于JS写入方式的innerText

        //数值
        // root.render(100); //虽然给出的是数值，但是写入按照字符串的方式来写入

        //数组
        // root.render([1, 2, 3, 4]); //会按照没有分隔符的形式来写入字符串
        // let obj = { a: 1, b: 2 }

        //5) render中`不可以渲染`的内容类型
        // let root = ReactDOM.createRoot(document.querySelector('#root'));
        //render中无法直接渲染对象
        // root.render({ a: 1, b: 2 });
        // root.render(obj);

        //JSON:
        //JSON.parse: 将JSON字符串转换成JSON对象
        //JSON.stringify:将JSON对象转换成JSON字符串
        // root.render(JSON.stringify({ a: 1, b: 2 }));

        //6) render中`不会报错，但不会渲染内容`的类型
        // let root = ReactDOM.createRoot(document.querySelector('#root'));
        // root.render(null);
        // root.render(undefined);
        // root.render();

        //布尔值在后期一般用于条件的判断，但是直接渲染没有结果
        // root.render(true);
        // root.render(false);

        //7) 不建议将根容器指定为body元素或html元素
        // let body = ReactDOM.createRoot(document.body);
        // body.render('尚硅谷');

        //document.documentElement:获取html元素
        let html = ReactDOM.createRoot(document.documentElement);
        // console.log(document.documentElement)
        html.render('尚硅谷');
    </script>
</body>

</html>